import { defineStore } from "pinia";
import { useTheme } from "vuetify";

interface ITodo {
    text: string;
    id: number;
    isFinished: boolean;
}

type IFilter = "all" | "finished" | "unfinished";

interface IState {
    todos: ITodo[];
    filter: IFilter;
    nextId: number;
    finishedTodos?: ITodo[];
    unfinishedTodos?: ITodo[];
    filteredTodos?: ITodo[];
}

export const useTodos = defineStore("todos", {
    state: (): IState => ({
        todos: [],
        filter: "all",
        nextId: 0
    }),

    getters: {
        finishedTodos(state) {
            return state.todos.filter(todo => todo.isFinished);
        },
        unfinishedTodos(state) {
            return state.todos.filter(todo => !todo.isFinished);
        },
        filteredTodos(state) {
            if (state.filter === "finished") {
                return state.finishedTodos;
            } else if (state.filter === "unfinished") {
                return state.unfinishedTodos;
            }
            return state.todos;
        }
    },
    actions: {
        addTodo(text: string) {
            this.todos.push({ text, id: this.nextId++, isFinished: false });
        }
    }
});
